<html>
    <head>
        <!--meta tagid omavad andmeid siinse faili andmete kohta. S.t. näiteks:
        1)kes on selle koodi kirjutanud, 
        2)milline on tähesüsteem
        3)Milliste sõnade järgi peaks otsingumootorid seda 
        lehte leidma. 
        4)Seda, kui tihti peaks brauser antud lehe uuendamiseks serverilt päringuid tegema
        jne-->
        <meta name="author" content="Reino Mänd">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="keywords" content="html oppimine, html tagid, Reino">
        <meta http-equiv="refresh" content="30">
        
        <!--link tag defineerib üldiselt ära selle html failiga seotud välised 
        ressursid (näiteks stiilifailid ehk css failid, javascripti failid jms)
        Praegu meil need ei aktiveeru-->
        <link rel="stylesheet" type="text/css" href="mingiStiiliFail.css">
        
        <!--head elemendis saab ära defineerida stiili, kuidas brauser järgneva 
        faili elemente välja näitab. Sama sisu on aga viisakas css faili panna
        Lisaks saab stiile integreerida ka otse tagide endi külge.-->
        <style type="text/css">
            body {background-color:lightskyblue}
        </style>

        <!--Head elemendis saab defineerida koodi, mis pannakse tööle kasutaja brauseris
        s.t. kasutaja oma ressurssidega (protsessori võimsusega jms, mitte serveripoolselt serveri omadega).
        Kirjutame midagi javascripti abil:-->
        <script type="text/javascript">
            document.write("Javascripti poolt kirjutatud tekst!")
        </script>
        
        <title>Siinne tekst ilmub brauseris tabile</title>
    </head>
    <body>
        <div align="center">
            
            <a href="#UO_Naide">
                Mine kohe Unordered ehk järjestamata list näite juurde, siia klikates...
            </a>
            <br/><br/>
            <a href="#UO_Naide" target="_blank">
                Siia klikates avad uue tabi, mis sind kohe Unordered List näite sektsiooni viib
            </a> 
            
            <h1>See on pealkiri</h1>
            <h2>See on pealkiri</h2>
            <h3>See on pealkiri</h3>


            <p>See on paragrahv</p>
            <p>See on järgmine paragrahv</p>

            <a href="http://www.google.com">
                See on link Google pealehele
            </a>
            <br/>
            <a href="http://www.google.com" target="_blank">
                Nüüd avaneb Google pealeht uue tabi peal
            </a>
            <br/>
            <a href="http://www.w3schools.com/tags/default.asp">
                Link kõikvõimalikele tagidele
            </a>
            <br/>
            <a href="http://www.w3schools.com/tags/ref_standardattributes.asp">
                Link kõikvõimalikele standardatribuutidele
            </a>
            <br/>
            <a href="http://www.w3schools.com/tags/ref_charactersets.asp">
                Link võimalikele tähesüsteemidele
            </a>
            <br/>
            <a href="http://www.w3schools.com/tags/ref_symbols.asp">
                Link sümbolite teistsugusele tähistamisele html-i tavatekstis
            </a>
            <br/>
            <a href="http://www.w3schools.com/tags/ref_language_codes.asp">
                Keele koodid html tagidele
            </a>
            <br/>


            <h2 style="color:red;">Formaatimise tagid:</h2>

                <p>
                    <b>Seda teksti ümbritsevad &lsaquo;b&rsaquo; tagid</b>
                </p>
                <p>
                    <strong>Seda teksti ümbritsvad strong tagid</strong>
                </p>
                <p>
                    <i>Seda teksti ümbritsevad i tagid</i>
                </p>
                <p>
                    <em>Seda teksti ümbritsevad em tagid</em>
                </p>
                <p>
                    <code>Seda teksti ümbritsevad code tagid. Muudab teksti fondi arvuti koodi skriptiks</code></p>
                <p>
                    See on <sub> subscript</sub> ja see on <sup>superscript</sup>
                </p>

                <h2 style="color:red;">Tabeli loomine:</h2>
                <table border="1">
                    <tr>
                        <th>Veeru pealkiri 1</th>
                        <th>Veeru pealkiri 2</th>
                    </tr>
                    <tr>
                        <td>rida 1, veerg 1</td>
                        <td>rida 1, veerg 2</td>
                    </tr>
                    <tr>
                        <td>rida 2, veerg 1</td>
                        <td>rida 2, veerg 2</td>
                    </tr>
                </table> 

                <h2 style="color:red;">Ordered ja Unordered List:</h2>
                <p>Ordered List, ehk järjestatud list</p>
                <ol>
                    <li>Kohv</li>
                    <li>Tee</li>
                </ol>
                
                <p><a id="UO_Naide">Unordered ehk järjestamata list näide</a></p>
                <ul>
                    <li>Kohv</li>
                    <li>Tee</li>
                </ul> 
                
                <h2 style="color:red;">Youtube video lisamine:</h2>
                <iframe width="640" height="360" src="http://www.youtube.com/embed/DUQi_R4SgWo?feature=player_detailpage" frameborder="0" allowfullscreen>
                
                </iframe>
                
                <h2 style="color:red;">Pildid:</h2>
                
                <img src="piltMidaPole.jpg" width="200" height="200" alt="Siin peaks pilt olema, aga seda ei leitud"/> 
                <img src="2867610994_7c1f70f439.jpg" width="200" height="200" alt="Siin peaks pilt olema"/>
            </div>
     </body>
</html>
